<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>市场</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link rel="stylesheet" href="./css/chongwugou.css">
    <link rel="stylesheet" href="./css/chongwugouss.css">
    <link rel="stylesheet" href="./css/chongwugousss.css">
    <link rel="stylesheet" href="./css/shichang.css">
    <link rel="stylesheet" href="./css/tuss.css">
    <link rel="icon" href="./img/logo.png">
    <script>
        import echarts from 'https://cdn.jsdelivr.net/npm/echarts@5.5.1/+esm'
    </script>
    <style media="screen">
        /*简单reset*/
        * {
            margin: 0;
            padding: 0;
        }

        /*必须，关系到单个page能否全屏显示*/
        html,
        body {
            height: 110%;
            overflow: hidden;
        }

        #container,
        .sections,
        .section {
            /*必须，兼容，在浏览器不支持transform属性时，通过改变top/left完成滑动动画*/
            position: relative;
            /*必须，关系到单个page能否全屏显示*/
            height: 100%;
        }

        .section {
            /*有背景图时必须，关系到背景图能够全屏显示*/
            /* background-color: #000; */
            background-size: cover;
            background-position: 50% 50%;
        }

        /*非必需，只是用来设置背景图，id不会被插件用到*/
        /* #section0 {
            background-image: url(img/img1.jpg);
        }
        #section1 {
            background-image: url(img/img2.jpg);
        }
        #section2 {
            background-image: url(img/img3.jpg);
        }
        #section3 {
            background-image: url(img/img4.jpg);
        } */
        /*以下样式用来设置slider样式，可自行修改*/
        /* .pages {
            position: fixed;
            right: 10px;
            top: 50%;
            list-style: none;
        }

        .pages li {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            margin: 15px 0 0 7px;
        }

        .pages li.active {
            margin-left: 0;
            width: 14px;
            height: 14px;
            border: 4px solid #FFFFFF;
            background: none;
        } */
    </style>
</head>

<body>
    <div class="demoss">
        <div class="mulu">
            <a href="./首页.html">首页</a>
        </div>
    </div>
    <div id="container" data-XSwitch>

        <div class="sections">

            <div class="section" id="section0">
                <div class="htmleaf-container">
                    <h1>市场概述</h1>
                    <p class="sub">The overview of the market</p>

                    <main id=app style="text-align: center;">

                        <mochi-box shiba="ume" mood="happy" blush left-eye="laugh" right-eye="laugh" left-ear="down"
                            right-ear="down">
                            <h2>项目简介</h2>
                            <h3>
                                <a target="_blank" href="">Project introduction</a>
                            </h3>
                            <p class="shop kotobuki" title="kotobuki"></p>
                        </mochi-box>

                        <mochi-box shiba="sesame" mood="drool" left-ear="up" right-ear="up">
                            <h2>国、内外研究现状和发展动态</h2>
                            <h3>
                                <a target="_blank" href="">Sesame</a>
                            </h3>
                            <p class="shop kotobuki" title="kotobuki"></p>
                        </mochi-box>

                        <mochi-box shiba="tuna" mood="" left-ear="up" right-ear="middle">
                            <h2>つな</h2>
                            <h3>
                                <a target="_blank" href="">Tuna</a>
                            </h3>
                            <p class="shop kotobuki" title="kotobuki"></p>
                        </mochi-box>

                        <mochi-box shiba="okaka" pop mood="excited" left-ear="up" right-ear="flat">
                            <h2>おかか</h2>
                            <h3>
                                <a target="_blank" href="">Okaka</a>
                            </h3>
                            <p class="shop kotobuki" title="kotobuki"></p>
                        </mochi-box>


                        <mochi-box shiba="anko" mood="cheeky" left-eye="open" right-eye="laugh" left-ear="flat"
                            right-ear="middle">
                            <h2>あんこ</h2>
                            <h3>
                                <a target="_blank" href="o">Sweet Bean</a>
                            </h3>
                            <p class="shop kotobuki" title="kotobuki"></p>
                        </mochi-box>
                    </main>
                    <nav id="hexNav" class="tu">
                        <div id="menuBtn">
                            <svg viewbox="0 0 100 100">
                                <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="transparent" stroke-width="4"
                                    stroke="#585247" stroke-dasharray="0,0,300" />
                            </svg>
                            <span>

                            </span>
                        </div>
                        <ul id="hex">
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="./img/金毛.jpeg" alt="" />
                                        <h2 class="title">市场分析</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="./img/威尔士柯基.jpeg" alt="" />
                                        <h2 class="title">市场研究</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="./img/市场检查.png" alt="" />
                                        <h2 class="title">Title</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="./img/中华田园猫.jpeg" alt="" />
                                        <h2 class="title">Title</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="./img/技术市场.png" alt="" />
                                        <h2 class="title">Title</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                            <li class="tr">
                                <div class="clip"><a href="#" class="content">
                                        <img src="img/6.jpg" alt="" />
                                        <h2 class="title">Title</h2>
                                        <p>Catch phrase</p>
                                    </a></div>
                            </li>
                        </ul>
                    </nav>
                    <script type="text/javascript">
                        var hexNav = document.getElementById('hexNav');

                        document.getElementById('menuBtn').onclick = function () {
                            var className = ' ' + hexNav.className + ' ';
                            if (~className.indexOf(' active ')) {
                                hexNav.className = className.replace(' active ', ' ');
                            } else {
                                hexNav.className += ' active';
                            }
                        }
                    </script>
                </div>
                <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
                <script src="./js/script.js"></script>
            </div>
            <div class="section" id="section1">
                <h1>市场研究</h1>
                <div class="angry-grid">
                    <div id="item-0">
                        <p>数据显示，2022年中国宠物经济产业规模达4936亿元，同比增长25.2%；2025年市场规模有望达到8114亿元。</p>
                        <div id="图2" style="width: 600px; height: 400px;"></div>
                    </div>
                    <div id="item-1">
                        <p>数据显示，2023年宠物健康消费占比达44.0%，宠物健康消费将达1726亿元</p>
                        <div id="图1" style="width: 600px;height:400px;"></div>
                    </div>

                </div>
                <script>
                    var myChart = echarts.init(document.getElementById('图1'));
                    var option;

                    option = {
                        title: {
                            text: '2018-2023年中国宠物消费市场规模', // 添加标题
                            left: 'center', // 标题居中显示
                            top: '2%' // 设置标题距离顶部的距离
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['宠物健康消费', '宠物总体消费', '占比'],
                            top: '10%' // 设置图例距离顶部的距离
                        },
                        grid: {
                            top: '15%', // 设置图表的上边距
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true // 确保图表内容不会与边框重叠
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: [2018, 2019, 2020, 2021, 2022, 2023],
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '消费(亿元)',
                                min: 0,
                                max: 4000,
                                interval: 500,
                                axisLabel: {
                                    formatter: function (value) {
                                        return value; // 直接返回值，去掉逗号
                                    }
                                }
                            },
                            {
                                type: 'value',
                                name: '占比',
                                min: 0,
                                max: 100,
                                interval: 10,
                                axisLabel: {
                                    formatter: function (value) {
                                        return value + ' %'; // 占比的显示
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '宠物健康消费',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' 亿元';
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                data: [418, 483, 655, 881, 1216, 1726]
                            },
                            {
                                name: '宠物总体消费',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' 亿元';
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                data: [1685, 2005, 1058, 1489, 3117, 3924]
                            },
                            {
                                name: '占比',
                                type: 'line',
                                yAxisIndex: 1,
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' %';
                                    }
                                },
                                data: [24.8, 24.1, 31.8, 35.4, 39.0, 44]
                            }
                        ]
                    };

                    option && myChart.setOption(option);

                </script>

                <script>
                    var myChart = echarts.init(document.getElementById('图2'));
                    var option;
                    option = {
                        title: {
                            text: '2015-2023年中国宠物经济产业规模',
                            left: 'center',
                            top: '2%' // 设置标题距离顶部的距离
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },

                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['产业规模（亿元）', '同比增长率', 'Temperature'],
                            top: '10%' // 设置图例距离顶部的距离
                        },
                        grid: {
                            top: '15%', // 设置图表的上边距
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true // 确保图表内容不会与边框重叠
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '产业规模',
                                min: 0,
                                max: 10000, // 调整最大值以更好显示数据
                                interval: 1000,
                                axisLabel: {
                                    formatter: '{value} 亿元'
                                }
                            },
                            {
                                type: 'value',
                                name: '同比增长率',
                                min: 0,
                                max: 40, // 根据实际温度数据调整
                                interval: 5,
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '产业规模（亿元）',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' ml';
                                    }
                                }, label: {
                                    show: true,
                                    position: 'top'
                                },
                                data: [978, 1220, 1340, 1780, 2212, 2953, 2942, 4946, 5928]
                            },
                            {
                                name: '同比增长率',
                                type: 'line',
                                yAxisIndex: 1,
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' °C';
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                data: [, 24.7, 9.8, 32.8, 24.3, 33.5, 33.5, 25.2, 20.1]
                            }
                        ]
                    };
                    option && myChart.setOption(option);


                </script>
            </div>
            <div class="section" id="section2">
                <h1>市场啥</h1>
                <div class="angry-grid-seciton2">
                    <div id="section2-item-0">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/松下.jpg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    松下
                                </h3>
                                <div>
                                    2023年，松下正式推出了其全新的宠物产品矩阵。本届AWE2024，松下也带来了其宠物电器矩阵，包含自动猫砂盆、宠物烘干箱、宠物饮水机、智能喂食器、智能保鲜碗、逗猫玩具等产品。“相对而言，去年的商品线比较薄弱，今年下半年我们会上线猫抓板、猫厕所等产品，相信届时这些松下自研的新品发布将会在市场中引起较大的轰动。”松下小家电商品营销中心中心长王文博对此表示。
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="section2-item-1">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/飞利浦.jpeg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    飞利浦
                                </h3>
                                <div>
                                    飞利浦再AWE2024重磅发布了全新产品四合一宠物空气净化器「四脚兽」，吸引了业内、媒体及消费者多方关注。此款宠物空气净化器可以一机解决浮毛、异味、细菌、过敏源问题，以更加人性化的创新技术，从爱猫用户实际需求出发，为养猫家庭带来了更加优秀的选择。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-2">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/萤石网络.jpg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    萤石网络
                                </h3>
                                <div>
                                    海康威视子品牌萤石网络则推出了AI智能扫拖宝RS20
                                    PRO，创新采用主动切毛滚刷技术，清扫结束后回到基站，会启动滚刷反转，带动合金刀片，割断滚刷上的缠毛，不缠不绕不打结。通过现场的真实缠绕切割体验，还原了三合一主动切毛滚刷技术的工作原理。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-3">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/3i.png" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    3i
                                </h3>
                                <div>
                                    3i则展出了其在智能宠物用品领域的革命性创新成果——全球首款智能封装净味猫砂舱。3i智能封装净味猫砂舱采用了全球首创智能封装净味系统，在自动铲出猫砂团后即刻智能封装，能够有效隔绝臭味大分子和蚊虫细菌，并分解臭味小分子，净味杀菌，真正实现“铲屎呼吸自由”。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-4">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/波奇商城.png" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    波奇商城
                                </h3>
                                <div>
                                    2008年9月上线，是国内老牌的宠物用品渠道零售商，B2C宠物食品用品销售平台;销售商品近万种，包括主食、零食、药品、保健品、清洁、洗浴、附属用品(包括宠物服饰、玩具、食具/牵引、美容洗浴器材、宠窝等);拥有购物向导和客服团队，以货正价优的服务宗旨，提供优质的网络购物体验。2016年1月完成招商银行领投的C轮1.02亿美元，成为宠物行业内目前最大一笔融资。波奇网的产品范围已经扩散到小宠、水族、爬虫，从多方位满足养宠人士需求，不再局限于猫咪和狗狗的产品。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-5">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/派多格.jpeg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    派多格
                                </h3>
                                <div>
                                    2008年创立，派多格品牌的建立经过了及其跌宕的过程，一开始创建了淘狗网，但是由于当时互联网市场并没有打开，企业立刻转型进军线下连锁。线下连锁的模式一时间在人群间扩散开来，随着派多格全国战略的推进，宠物加盟连锁机构辐射全国，建店数百家，分销商遍布各大中城市，产品与服务的组合，树立起了派多格在宠物行业独一无二的地位，业务范围涵盖了线下的方方面面，已经在宠物经济的产业链上编织形成产派多格的产业帝国。现在在大街小巷都能看见派多格的门店，如果说波奇是宠物电商界的老大，那么派多格就是线下实体店的龙头了。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-6">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/飞利浦.jpeg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    飞利浦
                                </h3>
                                <div>
                                    飞利浦再AWE2024重磅发布了全新产品四合一宠物空气净化器「四脚兽」，吸引了业内、媒体及消费者多方关注。此款宠物空气净化器可以一机解决浮毛、异味、细菌、过敏源问题，以更加人性化的创新技术，从爱猫用户实际需求出发，为养猫家庭带来了更加优秀的选择。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="section2-item-7">
                        <div class="animate-card animate-card-87">
                            <div class="animate-card__layer">
                                <img src="./img/飞利浦.jpeg" />
                            </div>

                            <div class="animate-card__sublayer">
                                <h3>
                                    飞利浦
                                </h3>
                                <div>
                                    飞利浦再AWE2024重磅发布了全新产品四合一宠物空气净化器「四脚兽」，吸引了业内、媒体及消费者多方关注。此款宠物空气净化器可以一机解决浮毛、异味、细菌、过敏源问题，以更加人性化的创新技术，从爱猫用户实际需求出发，为养猫家庭带来了更加优秀的选择。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section" id="section3">
                <h1>市场啥啥</h1>


            </div>
            <div class="section" id="section4">
                <h1>市场啥啥啥</h1>
            </div>
            <div class="section" id="section5">
                <h1>市场啥啥啥啥</h1>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/XSwitch.min.js" charset="utf-8"></script>
</body>

</html>